<!-- Author:Rain -->

<template>
    <div id="wrap" class>
        <div class="new-guide">
            <div class="container">
                <div class="new-guide-page">
                    <div class="page-content">
                        <div class="new-guide-common">
                            <div class="new-guide-common__left"><a href="/" class="new-guide-common__logo"></a>
                                <span class="new-guide-common__boss" @click="changeIdentity">
                                    切换{{ identity == "geek" ? 'BOSS' : 'GEEK' }}身份 </span>
                                <div class="new-guide-common__header new">
                                    <div v-show="identity == 'geek'">让您的简历脱颖而出：<br>上传您的电子简历</div>
                                    <div v-show="identity == 'boss'">ForJob欢迎您成为招聘者<br>进行实名认证更好的去找人才</div>
                                </div>
                                <div v-show="identity === 'geek'" class="new-guide-common__upload new">
                                    <div class="new-guide-upload-resume large">
                                        <div class="resume-logo"></div>
                                        <p class="tip-drag">上传简历，识别成在线内容</p>
                                        <div class="btns"><label for="uploadFile" class="btn btn-primary btn-file">
                                                上传附件简历
                                                <input id="uploadFile" type="file" accept=".pdf,.jpg,.png" @change="postResumeFile"></label>
                                        </div>
                                        <p class="tip-filetype">支持PDF、IMG格式，文件大小需小于8M</p>
                                    </div>
                                </div>
                                <div v-show="identity === 'boss'" >
                                    <img style="width: 400px;" src="http://localhost:8080/api/images/assets/header_ill.svg">
                                </div>
                                
                            </div>
                            <div class="new-guide-common__right">
                                <!-- 右侧主要内容！！！ -->
                                <router-view v-slot="{ Component }">
                                    <transition>
                                        <keep-alive>
                                            <component ref="child" :is="Component" />
                                        </keep-alive>
                                    </transition>
                                </router-view>
                            </div>
                        </div>
                    </div>
                    <footer>
                        <div v-if="identity === 'geek'" class="new-guide-page__operation">
                            <!-- <span class="show-skip" v-if="currentPage == 4" @clcik="next">跳过此步骤<i
                                    class="icon-arrow"></i></span> -->
                            <button type="button" class="btn" :class="currentPage>1?'btn-primary':''"  @click="previous">上一步</button>
                            <!-- <button  type="button" class="btn btn-primary next disabled"> 下一步 </button> -->
                            <button type="button" class="btn next" :class="currentPage<6?'btn-primary':''" @click="next">{{ currentPage<6?'下一步':'完成' }} </button>
                        </div>
                        <!-- boss的下边选框！ -->
                        <div v-else class="new-guide-page__operation">
                            <button type="button" class="btn btn-primary next" @click="checkout"> 进行身份验证 </button>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useStorage } from "@vueuse/core";
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from "@/store/modules/user"
const userStore = useUserStore();
import { updateBasicInfo, updateEducationInfo, updateForjobInfo } from "@/api/user/index"
import type { basicInfo, educationInfo, forJobInfo } from "@/api/user/types"
const route = useRoute()
const router = useRouter()
let currentPage = ref(1)
function next() {
    let page: number = route.meta.page as number;
    if (page == 5) {
        //这里还是叫上了本地存储
        let guideInfo = JSON.parse(localStorage.getItem("guideInfo") as string)
        let {'guide-1':g1,'guide-2':g2,'guide-3':g3,'guide-4':g4,'guide-5':g5}=guideInfo
        //在这里进行一遍提交
        console.log(guideInfo);

        //喵的，我发现还需要进行整合
        let BasicInfo: basicInfo = {
            name: g1.name,
            age: 20,
            gender:g1.guide_sex,
            birthday:g1.birthday
        }
        let EducationInfo: educationInfo = {
            background: g3.background,//学历背景
            type: g3.type,//学历类型
            school: g3.school,//毕业学校
            major: g3.major,//专业
            undergo:{end:'2023',start:'2021'},
            experience:g3.experience//这个有问题的
        }
        let ForjobInfo: any = {
            identity: g1.identity,//身份   职场人|学生
            firstJobTime:g1.firstJob,//首次参加工作时间
            status: g1.status,//求职状态
            city: g2.city,
            position: g2.pos,
            salary:{}
        }

        //更新基本信息
        updateBasicInfo(BasicInfo).then(val => {
            console.log(val,"basic");
        }, err => {
            console.log(err);
        })
        // 更新教育信息
        updateEducationInfo(EducationInfo).then(val=>{
            console.log(val,"education");
        }).catch(err=>{
            console.log(err);
        })
        //更新职位信息
        updateForjobInfo(ForjobInfo).then(val=>{
            console.log(val,"forjob");
            
        }).catch(err=>{
            console.log(err);
            
        })

    }

    if (page == 6) {
        //进行主页跳转了
        return  router.push('/geek/home')
    };
    router.push("/guide/guide-" + (page + 1))
    currentPage.value = page + 1
}
function previous() {
    let page: number = route.meta.page as number;
    if (page == 1) return;
    router.push("/guide/guide-" + (page - 1))
    currentPage.value = page - 1
}
//我觉的一些值可以先存到本地存储中，到时候再放出来提交
let guideInfo = useStorage("guideInfo", {
    "guide-1": {},
    "guide-2": {},
    "guide-3": {},
    "guide-4": {},
    "guide-5": {},
    "guide-6": {}
})

function postResumeFile(e){
    const file = e.target.files[0];
    console.log(file);
    userStore.postResumeFile(file).then(res=>{
        console.log("---------------",res);
    }).catch(err =>{
        console.log(err);
    })
}
/* boss身份或者geek身份进行切换 
登录注册是跳转到这里的时候应该是有身份信息的！！！*/
//身份
let identity = ref(route.name)
function changeIdentity() {
    //相对的路由跳转
    if (identity.value === "geek") {
        //这里就不需要考虑到传参了！
        router.push("/guide/boss")
        identity.value = "boss"
    } else {
        identity.value = "geek"
        router.push("/guide/guide-1")
    }
}
// 进行身份验证
const child=ref(null)
function checkout() {
    //验证成功跳转页面
    let promise=child.value.dd()
    promise.then(val=>{
        let {data:{code,msg}}=val;
        if(code==200){
            ElMessage({
            message: msg,
            type:'success'
        })
         router.push("/boss")
        }else{
            ElMessage({
            message: msg,
            type:'error'
        })
        }
    }).catch(err=>{
        ElMessage({
            message: msg,
            type:'error'
        })
        console.log(err)
    })
   
}




</script>

<style scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.6s linear;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

#wrap {
    position: relative;
    min-width: 1224px;
    min-height: 100%;
    overflow: visible;
    overflow-x: hidden;
}

.new-guide {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100vh;
    background:var(--themeColor) url(//localhost:8080/api/images/assets/bg5.png) bottom/100% auto no-repeat;
    /* background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom; */
}

.new-guide .container {
    position: relative;
    width: 1184px;
    height: calc(100vh - 80px);
    min-height: 614px;
    border-radius: 16px;
    overflow: hidden;
}

.new-guide-page {
    height: 100%;
}

/* 页面主要内容 */
.new-guide-page .page-content {
    position: relative;
    background-color: #fff;
    height: 100%;
}

.new-guide-common {
    display: flex;
    width: 100%;
    height: 100%;
}

/* 主要内容左侧 */
.new-guide-common__left {
    position: relative;
    padding: 40px 0 40px 70px;
    width: 492px;
    height: 100%;
    background: linear-gradient(180deg, #fff8f0, #e5f8f8);
}

.new-guide-common__logo {
    position: absolute;
    left: 70px;
    top: 58px;
    width: 88px;
    height: 16px;
    background: url('../../assets/icons/返回.svg') 0 0 no-repeat;
    background-size: 88px 16px;
}

.new-guide-common__boss {
    position: absolute;
    top: 54px;
    right: 40px;
    color: var(--themeColor);
    cursor: pointer;
}

.svg-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
}

.new-guide-common__boss .icon-change-boss {
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.new-guide-common__header {
    margin-top: 40px;
    font-size: 28px;
    font-weight: bolder;
    color: #222;
    line-height: 42px;
}

.new-guide-common__header.new {
    margin-top: 108px;
}

.new-guide-common__upload {
    position: absolute;
    bottom: 40px;
    background: #fff;
    border-radius: 8px;
}

.new-guide-common__upload.new {
    width: 362px;
    margin-top: 60px;
    position: static;
}

.new-guide-upload-resume {
    text-align: center;
    padding: 12px;
    /* width: 362px; */
    border: 1px dashed #ccc;
    border-radius: 8px;
}

.new-guide-upload-resume .resume-logo {
    margin: 16px auto 0;
    width: 137px;
    height: 145px;
    background: url(https://img.bosszhipin.com/static/file/2023/eop4kvebz21692600845806.png) 0 0 no-repeat;
    background-size: 137px 145px;
}

.new-guide-upload-resume .tip-drag {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

.new-guide-upload-resume .btns {
    margin-top: 16px;
}

.new-guide-upload-resume .btn-file {
    position: relative;
    overflow: hidden;
    background: var(--themeColor);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.new-guide-upload-resume.large .btn-file {
    width: 237px;
    height: 40px;
    line-height: 22px;
}

.new-guide-upload-resume .btn-file:before {
    margin-right: 2px;
    vertical-align: -2px;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(https://img.bosszhipin.com/static/file/2023/8tibnd6hgr1682574563172.png) 0 0 no-repeat;
    background-size: 15px 15px;
    cursor: pointer;
}

.btn {
    margin: 0;
    padding: 9px 15px;
    line-height: 1;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #e3e7ed;
    color: #414a60;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: background-color .1s linear, box-shadow .1s linear;
    outline: none;
    user-select: none;
}

.new-guide-upload-resume .btn-file input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: none;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
}

.new-guide-upload-resume .tip-filetype {
    padding-top: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #9fa3b0;
    line-height: 17px;
}

/* guide内容右侧 */
.new-guide-common__right {
    position: relative;
    padding-top: 104px;
    flex: 1;
    height: 100%;
}



/* Footer */
.new-guide-page footer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 692px;
    height: 120px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 40% 100%);
    z-index: 9;
}

.new-guide-page__operation {
    position: absolute;
    right: 100px;
    bottom: 40px;
}

.new-guide-page__operation .btn {
    min-width: 96px;
    height: 36px;
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
}

.new-guide-page__operation .btn.disabled {
    opacity: .2;
}

.new-guide-page__operation .btn.next {
    margin-left: 20px;
}

.new-guide-page__operation .btn-primary {
    background: var(--themeColor);
    color: #fff;
}

.new-guide-page__operation .show-skip {
    margin-right: 200px;
    font-size: 14px;
    color: var(--themeColor);
    line-height: 20px;
    cursor: pointer;
}

.new-guide-page__operation .show-skip .icon-arrow {
    margin-left: 8px;
    display: inline-block;
    width: 4px;
    height: 7px;
    background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -8px/10px auto no-repeat;
    z-index: 1;
}
</style>